<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="课程名称">
            <el-input clearable v-model="queryParams.courseName" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.status" placeholder="">
              <el-option label="全部" value=""></el-option>
              <el-option label="上架" value="1"></el-option>
              <el-option label="下架" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadCourses" :disabled="isLoading">查询</el-button>
          </el-form-item>
        </el-form>
        <el-button style="float: right; padding:15px" type="primary" @click="$router.push({name:'course-create'})">+新建课程</el-button>
      </div>
      <el-table
          :data="tableData"
          border
          style="width: 100%"  v-loading="isLoading">
        <el-table-column
            type="index"
            label="编号"
            width="180"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="id"
            label="逻辑编号"
            width="180"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="日期"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="name"
            label="课程名称"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="courseCode"
            label="课程编码" align="center">
        </el-table-column>
        <el-table-column
            prop="coursePicture"
            label="课程图片" align="center">
        </el-table-column>
        <el-table-column
            prop="sort"
            label="排序" align="center">
        </el-table-column>
        <el-table-column
            prop=""
            label="状态" align="center" v-slot="scope">
          <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              active-text="上架"
              inactive-text="下架"
              @change="handleChangeStatus(scope.row)"
          >
          </el-switch>
        </el-table-column>

        <el-table-column
            prop=""
            label="操作" align="center" v-slot="scope">
          <el-button @click="$router.push({name:'course-edit',params:{courseId:scope.row.id}})">编辑</el-button>
          <el-button>内容管理</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageSize"
          :page-sizes="[3, 6, 10, 50]"
          :page-size="queryResult.pageNum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryResult.totalSize"
          :disabled="isLoading"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {getAllCourseList, setCourse} from "@/api/courses/courses";

export default {
  name: "CourseIndex",
  data() {
    return {
      //查询参数
      queryParams: {
        pageSize: 1,
        pageNum: 10,
        // name: '',
        courseName:'',
        status:''
      },
      //查询结果
      queryResult: {},
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      //是否加载数据 false加载成功  true正在加载
      isLoading: false
    }
  },
  created() {
    this.loadCourses();
  },
  methods: {
    loadCourses() {
      //未加载完成
      this.isLoading=true
      getAllCourseList(this.queryParams).then(res => {
        if (res.data.code === '200') {
          //当前页,当前页显示多少条数据,展示的多少条,总页数,总记录数
          const {currPage, pageSize, rows, totalPage, totalSize} = res.data.data;
          //当前页,当前页显示多少条数据,和后端数据一致
          console.log("查询参数:", this.queryParams);
          this.queryParams.pageSize = currPage;
          this.queryParams.pageNum = pageSize;
          //展示的多少条,总页数,总记录数
          this.queryResult = {rows, totalPage, totalSize}
          this.tableData = this.queryResult.rows
          console.log("查询参数:", this.queryParams);
        } else {
          this.$message.error('获取课程分页数据失败!')
        }
      }).finally(()=>{
        //加载完成
        this.isLoading=false
      })
    },
    //每页显示多少条数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageNum = val;
      this.queryParams.pageSize = 1;
      this.loadCourses()
    },
    //当点击不同的页号时
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageSize = val;
      this.loadCourses()
    },
    //上架或者下架操作
    handleChangeStatus(course){
      console.log(course.status);
      const actionStr=course.status?'上架':'下架'
      //调用接口
      const data={
        courseId:course.id,
        courseStatus:course.status
      }
      setCourse(data).then((res)=>{
        if(res.data.code==='200'){
          this.$message.success(`课程${actionStr}成功!`)
        }else {
          this.$message.error(`课程${actionStr}失败!`)
        }
      })
    }
  }
}
</script>


<style scoped>

</style>
